<script setup lang="ts">
  import { ref } from 'vue';
  import TableLayout from '@/layout/table-layout.vue';
  import { usePageTable } from '@/hooks/arco/usePageTable';
  import { IconSearch, IconRefresh } from '@arco-design/web-vue/es/icon';
  import {
    queryServiceProjectList,
    queryServiceProjectDetail,
    createServiceProject,
    updateServiceProject,
    deleteServiceProject,
  } from '@/api-new2/service/service-items';
  import useModeModalHandler from '@/hooks/arco/useModeModalHandler';
  // import DetailDrawer from './detail-drawer.vue';

  // 表格列定义
  const columns = [
    {
      title: '项目ID',
      dataIndex: 'id',
      width: 100,
    },
    {
      title: '所属分类',
      dataIndex: 'serviceCatName',
      width: 150,
    },
    {
      title: '项目名称',
      dataIndex: 'name',
      width: 200,
    },
    {
      title: '项目状态',
      dataIndex: 'status',
      width: 120,
      render: ({ record }: any) => {
        return record.status === 1 ? '启用' : '禁用';
      },
    },

    {
      title: '收费标准',
      dataIndex: 'priceModelName',
      width: 150,
    },
    {
      title: '项目单价（元）',
      dataIndex: 'price',
      width: 150,
    },

  ];

  // 搜索表单状态
  const searchForm = ref({
    name: '', // 项目名称
  });

  // 使用分页表格hook
  const page = usePageTable({
    table: {
      apiFun: (params: any) => {
        return queryServiceProjectList({
          ...params,
          name: searchForm.value.name,
        });
      },
      columns,
    },
    searchForm: {
      state: {
        name: '',
      },
    },
  });

  // 重置搜索表单
  const handleReset = () => {
    searchForm.value.name = '';
    page.reload();
  };

  // 执行搜索
  const handleSearch = () => {
    page.reload();
  };

  // 使用mode modal handler
  const modalHandler = useModeModalHandler({
    onSuccess() {
      // 重新加载数据
      page.reload();
    },
  });

  // 显示新增弹窗
  const handleAdd = () => {
    modalHandler.showAdd();
  };

  // 显示编辑弹窗
  const handleEdit = (record: any) => {
    modalHandler.showEdit(record);
  };

  // 显示详情弹窗
  const handleDetail = (record: any) => {
    modalHandler.showDetail(record);
  };

  // 删除项目
  const handleDelete = (record: any) => {
    deleteServiceProject({ id: record.id }).then(() => {
      // 重新加载数据
      page.reload();
    });
  };
</script>

<template>
  <div>
    <TableLayout v-bind="page.bindProps" :create="false">
      <template #searchForm="{ state }">
        <a-form-item field="name" label="项目名称">
          <a-input
            v-model="state.name"
            placeholder="请输入项目名称"
            allow-clear
          />
        </a-form-item>
      </template>

      <template #action="{ record }">
        <a-space>
          <a-button size="small" type="text" @click="handleDetail(record)">
            查看
          </a-button>
        </a-space>
      </template>

      <!-- 详情抽屉 -->
    </TableLayout>

    <!-- <DetailDrawer v-bind="modalHandler.bindProps" /> -->
  </div>
</template>

<style lang="less" scoped>
  .form-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 10px;
  }
</style>
